<template>
   <div class="number">
        <ul id="dataNums">
           <template v-if="type===1">
            <li v-for="(item,index) in list" :key="index" class="li1">
                <div class="nums-content">
                    <div class="nums-item" :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
                          <span v-for="(item2,index2) in numList" class="nums1" :key="index2">{{item2}}</span>
                    </div>
                </div>
            </li>
         </template>
           <template v-if="type===2">
            <li v-for="(item,index) in list" :key="index" class="li2">
                <div class="nums-content">
                    <div class="nums-item" :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
                          <span v-for="(item2,index2) in numList" class="nums1" :key="index2">{{item2}}</span>
                    </div>
                </div>
            </li>
         </template>
        </ul>
    </div>
</template>
<script>
export default {
  props: {
      number:{
          type:Number,
          default:0
      },
      type:{
          type:Number,
      }
  },
  data() {
    return {
        list:[],
        numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.']
    }
  },
  watch: {
    type:{
      immediate: true,
      handler: function(val) {
      }
      },
    number:{
      immediate: true,
      handler: function(val) {
       this.scroll(val)
      }
      },
  },
  mounted(){
  },
  methods: {
   scroll(val){
        this.list=val.toString().split('');
        let arr=[];
        this.list.forEach((value) => {
            arr.push({
            num:value,
            top:0
            })
        });
        this.list=arr;
        let Hei=24;
            this.list.forEach((value,index) => {
                setTimeout(()=>{
                    if(value.num==='.'){
                       value.top=1000
                    }else{
                       value.top=parseFloat((value.num*Hei)+(Hei*10))
                    }
                },index*300)
            });
        }
  },
}
</script>
<style lang="less" scoped>
.number {
    ul {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        text-align: center;
        display: flex;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        .li1 {
        width: 15px;
        height: 24px;
        background-size: 100% 100%;
        list-style: none;
        border-radius: 4px;
            .nums-content {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
                .nums-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                    .nums1{
                        width: 100%;
                        height: 100%;
                        line-height: 24px;
                        float: left;
                        text-align: center;
                        font-size: 24px;
                        font-weight: 600;
                        color: #fff;
                    }
                }
            }
        }
        .li2 {
        width: 12px;
        height: 24px;
        background-size: 100% 100%;
        list-style: none;
        border-radius: 4px;
            .nums-content {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
                .nums-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                    .nums1{
                        width: 100%;
                        height: 100%;
                        line-height: 24px;
                        float: left;
                        text-align: center;
                        font-size: 20px;
                        font-weight: 400;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>